import React, { Component } from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    View,
    TextInput,
    Image,
    TouchableOpacity, Dimensions, NativeModules,
} from 'react-native';
import { Actions } from 'react-native-router-flux';
import { pTd } from "../../util/adapter";
import Button from "../../component/Button"
import CallActionsOnce from "../../util/callActionsOnce"
import DIYIcon from "../../component/Icon/index";

export default class InformationSubmit extends Component{

    constructor(props) {
        super(props);
        this.state = {
            mobileValue:"",
            nameValue:"",
        };

    }

    onChangeNameValue=(text)=>{
        this.setState({nameValue: text})
    };

    onChangeMobileValue=(text)=>{
        this.setState({mobileValue: text})
    };

    handlePressPostInformationSubmit=()=>{
      //提交
        CallActionsOnce(()=>Actions.InformationSubmitSuccess())
    };

    render() {

        return <View style={style.container}>

            <View style={style.informationWarp}>
                <View style={style.inputItem}>
                    <Text style={style.leftInputItem}>姓名</Text>
                    <TextInput
                        underlineColorAndroid='transparent'
                        style={style.textInput}
                        placeholder="请输入您的姓名"
                        placeholderTextColor="#999999"
                        selectionColor="#999999"
                        onChangeText={this.onChangeNameValue}
                        value={this.state.nameValue}
                    />
                </View>
                <View style={style.inputItem}>
                    <Text style={style.leftInputItem}>性别</Text>
                    <View style={style.rightInputItem}>
                        <TouchableOpacity activeOpacity={1} onPress={null}  style={[style.genderItem,style.activeGenderItem]}>
                            <Text style={[style.genderItemText,style.activeGenderItemText]}>男</Text>
                        </TouchableOpacity>
                        <TouchableOpacity activeOpacity={1} onPress={null}   style={style.genderItem}>
                            <Text style={style.genderItemText}>女</Text>
                        </TouchableOpacity>
                    </View>
                </View>
                <View style={style.inputItem}>
                    <Text style={style.leftInputItem}>联系方式</Text>
                    <TextInput
                        underlineColorAndroid='transparent'
                        style={style.textInput}
                        keyboardType="numeric"
                        placeholder="请输入您的姓名"
                        placeholderTextColor="#999999"
                        selectionColor="#999999"
                        onChangeText={this.onChangeMobileValue}
                        value={this.state.mobileValue}
                    />
                </View>
                <View style={style.inputItem}>
                    <Text style={style.leftInputItem}>可服务区</Text>
                    <View style={style.rightInputItem}>
                        <TouchableOpacity activeOpacity={1} onPress={null} style={[style.selectItem,style.selectItemMargin]}>
                            <Text style={[style.genderItemText]}>长沙市</Text>
                            <View><DIYIcon name={'xiala'} size={pTd(26)} color={'#FE9727'} /></View>
                        </TouchableOpacity>
                        <TouchableOpacity activeOpacity={1}  onPress={null}  style={style.selectItem}>
                            <Text style={style.genderItemText}>岳麓区</Text>
                            <View><DIYIcon name={'xiala'} size={pTd(26)} color={'#FE9727'} /></View>
                        </TouchableOpacity>
                    </View>
                </View>
            </View>
            <Text style={style.informationTips}>填写以上信息，三个工作日内获得反馈</Text>
            <View style={style.informationButtonWarp}>
                <Button
                    text="确认提交"
                    ButtonStyles={{backgroundColor: '#DDDDDD',borderColor:"#DDDDDD"}}
                    ButtonTextStyles={{fontSize: pTd(32),color: "#ffffff"}}
                    handlePressFunction={this.handlePressPostInformationSubmit}
                />
            </View>
        </View>
    }
}


const style = StyleSheet.create({
    container:{
        flex:1,
        backgroundColor:"#F7F7F7",
    },
    headerImg:{
        width:'100%',
        height:pTd(320),
    },
    informationWarp:{
        marginTop: pTd(15),
        backgroundColor: '#ffffff',
        paddingHorizontal: pTd(32),
        marginBottom:pTd(32)
    },
    inputItem:{
        display: 'flex',
        height:pTd(96),
        flexDirection:'row',
        justifyContent:'flex-start',
        alignItems:'center',
        borderStyle:'solid',
        borderBottomWidth: pTd(1),
        borderBottomColor:'#E7E7E7'
    },
    textInput:{
        height:pTd(96),
        color:'#666666',
        paddingLeft:0,
        marginLeft:0,
        fontSize:pTd(28)
    },
    leftInputItem:{
        width:pTd(152),
        color: "#333333",
        fontSize: pTd(28),

    },
    rightInputItem:{
        display: 'flex',
        height:pTd(96),
        justifyContent: 'flex-start',
        alignItems: 'center',
        flexDirection: 'row',

    },
    genderItem:{
        width:pTd(64),
        height:pTd(64),
        borderRadius:pTd(32),
        display:'flex',
        justifyContent:'center',
        alignItems:'center',
        backgroundColor:'#E7E7E7',
        marginRight: pTd(40)
    },
    activeGenderItem:{
        backgroundColor:'#FE9727'
    },
    genderItemText:{
      color:'#666666',
      fontSize:pTd(28),
    },
    activeGenderItemText:{
        color:'#FFFFFF'
    },
    selectItem:{
        width:pTd(262),
        height:pTd(72),
        borderStyle:'solid',
        borderWidth: pTd(1),
        borderColor:'#E7E7E7',
        backgroundColor:'#FFFFFF',
        borderRadius: pTd(10),
        display:'flex',
        justifyContent:'space-between',
        alignItems:'center',
        padding: pTd(20),
        flexDirection:'row',
    },
    selectItemMargin:{
        marginRight: pTd(10)
    },
    informationTips:{
        fontSize:pTd(24),
        color:'#666666',
        marginHorizontal: pTd(32)
    },
    informationButtonWarp:{
        height: pTd(96),
        display: 'flex',
        justifyContent: 'center',
        marginHorizontal:pTd(32),
        alignItems: 'center',
        marginTop: pTd(64)
    }

});
